<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>充值</title>
		<%@include file="/WEB-INF/base.jspf"%>
		<style type="text/css">
		/* 	input,button{margin-top: 40px;} */
			*{font-size: 15px;font-weight: bold;}
			/* li{height: 60px;line-height: 60px;border-top: 1px solid #f2f2f2;} */
			img{width: 60vw;}
			/* select {font-size: 18px;height: 50px;margin-bottom: 30px;border-radius: 5px;outline: none;} */
			.nav-tabs > li {
				width: 25%;
			}
			 .nav-tabs > li > a {
				font-size:2.3vh;
				padding:1vh;
			} 
			#div-i-1, #div-i-2, #div-i-3, #div-i-4 {
				display:none;
			}
			.div-active {
				display:block!important;
			}
			#div-i-2 > ul input {
				margin-top:0;
			}
			#div-i-2 > ul {
				padding: 0 16px;
			}
			#div-i-2 > ul > li {
				text-align: left;
			}
			#div-i-2 > ul > li {
				margin-top:1vh;
			}
			.ul-i-tikuan > li span:first-child {
				color:red;
			}
/* 			hr {
				border:none;
				border-top:1px solid rgb(220, 220, 220);
			} */
			.table>thead>tr>th {
				vertical-align: middle;
			}
			table th, table td {
				white-space: nowrap;
				font-size:2.3vh;
				padding:1vh;
			}
			#div-i-1 {
				padding-top:3vh;
			}
			#div-i-3, #div-i-4 {
				padding-top:3vh;
				overflow: scroll;
				-webkit-overflow-scrolling : touch;
			}
			.ul-i-tikuan {
				display: none;
			}
			.ul-i-tikuan.active {
				display: block;
			}
			.input-li-c {
				display:flex;white-space:nowrap;align-items:center;
				justify-content:space-around;
			}
			.input-li-c span:nth-child(2) {
				width:14vh;
			}	
			.input-li-c input, #bankName-input-i {
				width: 40vh;
			}		
			.li-c-allSpanRed span {
			color:red;}
		</style>
	</head>

	<body>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center bg-primary" style="height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;">
			<strong style="font-size: 20px;color: white;">充值提现</strong>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center body" style="margin-top: 20px;" >
		<ul class="nav nav-tabs">
			<li class="tabLi active" data-index="1">
				<a>在线充值</a>
			</li>
			<li class="tabLi" data-index="2">
				<a>在线提款</a>
			</li>
			<li class="tabLi" data-index="3">
				<a>充值记录</a>
			</li>
			<li class="tabLi" data-index="4">
				<a>提现记录</a>
			</li>			
		</ul>
		<div id="div-i-1" class="div-active">
			<select>
				<option value="qq">QQ钱包</option>
				<option value="wx">微信</option>
				<option value="zfb">支付宝</option>
			</select>
				<br>
				<a href="img/cz/qq.png" download>
				<img src="img/cz/qq.png"/>
				</a>
			<div style="position: fixed;right: 0px;bottom: 50px;">
				<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=812775317&site=qq&menu=yes"><img border="0" style="width:50px;border:3px solid #01C2B5!important;border-radius:5px;padding:3px; " src="img/kefu.png" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
			</div>
			<div style="text-align: center; position: fixed;bottom: 50px;width: 100vw;font-size: 14px;color: gray">
				充值成功后或充值出现问题请联系我
			</div>
		</div>
		<div id="div-i-2">
<!-- 		<hr> -->
			<ul class="ul-i-tikuan" id="ul-i-twoDiv-1">
				<li class="li-c-allSpanRed"><span>提示信息</span></li>
				<li class="li-c-allSpanRed">1.每天的取款处理时间为：<span>00:00</span> 至 <span>23:59</span>;</li>
				<li class="li-c-allSpanRed">2.用户每次最小提现 <span>100</span>元，最大提现 <span>200000</span> 元;</li>
				<li class="li-c-allSpanRed">3.取款10分钟内到账。(如遇高峰期，可能需要延迟到20分钟内到帐);</li>
				<li><span>* </span>会员账号：<span id="span-i-userAccount-fromServer"></span></li>
				<li><span>* </span>真实姓名：<span id="span-i-truthName-fromServer"></span></li>
				<li><span>* </span>账户余额：<span id="span-i-accountMoney-fromServer" style="color:red;"></span> RMB</li>
				<li><span>* </span>出款银行：<span id="span-i-moneyBackType-fromServer"></span></li>
				<li><span>* </span>开户网点：<span id="span-i-moneyBackAdd-fromServer"></span></li>
				<li><span>* </span>银行账号：<span id="span-i-bankAccount-fromServer"></span></li>
				<li style="display:flex;white-space:nowrap;align-items:center;"><span>*&nbsp;</span>提款金额：<input id="input-i-returnMoneyNumber" class="form-control" /></li>
				<li style="display:flex;white-space:nowrap;align-items:center;"><span>*&nbsp;</span>提款密码：<input id="input-returnMoneyPass" type="password" class="form-control" /></li>
				<li style="text-align: center;"><button id="btn-i-addNewReturnMoney" class="btn btn-primary">提交</button></li>
			</ul>
			<ul class="ul-i-tikuan" id="ul-i-twoDiv-2">
				<li style="font-weight:bold;">你还未注册银行卡信息，请先注册。</li>
				<li style="display:flex;align-items:center;font-weight:bold;font-size:2vh;color:red;">请输入真实有效信息，避免造成提现失败。</li>
				<li class="input-li-c"><span>* </span><span>开户姓名：</span><input id="kaihuName-input-i" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>* </span><span>出款银行：</span><select class="form-control"  id="bankName-input-i">
						<option value="中国工商银行">中国工商银行</option>
						<option value="中国建设银行">中国建设银行</option>
						<option value="中国银行">中国银行</option>
						<option value="中国农业银行">中国农业银行</option>
						<option value="交通银行">交通银行</option>
						<option value="招商银行">招商银行</option>
						<option value="中信银行">中信银行</option>
						<option value="中国民生银行">中国民生银行</option>
						<option value="兴业银行">兴业银行</option>
						<option value="上海浦东发展银行">上海浦东发展银行</option>
						<option value="中国邮政储蓄银行">中国邮政储蓄银行</option>
						<option value="中国光大银行">中国光大银行</option>
						<option value="平安银行">平安银行</option>
						<option value="华夏银行">华夏银行</option>
						<option value="北京银行">北京银行</option>
						<option value="广发银行">广发银行</option>
						<option value="上海银行">上海银行</option>
						<option value="江苏银行">江苏银行</option>
						<option value="恒丰银行">恒丰银行</option>
						<option value="浙商银行">浙商银行</option>
						<option value="南京银行">南京银行</option>
						<option value="宁波银行">宁波银行</option>
						<option value="渤海银行">渤海银行</option>
						<option value="杭州银行">杭州银行</option>
						<option value="东亚银行">东亚银行</option>
						<option value="深圳发展银行">深圳发展银行</option>
						<option value="厦门银行">厦门银行</option>
						<option value="广州农商银行">广州农商银行</option>
						<option value="广东农信">广东农信</option>
						<option value="广西农村信用社">广西农村信用社</option>
						<option value="福建农村信用社">福建农村信用社</option>
						<option value="贵州农村信用社">贵州农村信用社</option>
						<option value="桂林银行">桂林银行</option>
						<option value="东莞农村商业银行">东莞农村商业银行</option>
						<option value="深圳农商银行">深圳农商银行</option>
						<option value="佛山顺德农村商业银行">佛山顺德农村</option>
						<option value="贵阳银行">贵阳银行</option>
						<option value="柳州银行">柳州银行</option>
						<option value="浙江农村信用社">浙江农村信用社</option>
						<option value="东莞银行">东莞银行</option>						
					</select>
				</li>
				<li class="input-li-c"><span>* </span><span>省　　份：</span><input id="shengfen-input-i" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>* </span><span>城　　市：</span><input id="city-input-i" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>* </span><span>开户网点：</span><input id="wangdian-input-i" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>*</span><span>银行账号：</span><input id="bankAccount-input-i" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>*</span><span>提款密码：</span><input id="getMoneyPassWord-input-i" type="password" class="form-control cant-empty-inputs" /></li>
				<li class="input-li-c"><span>*</span><span>确认密码：</span><input id="getMoneyPassWord-input-repeat" type="password" class="form-control cant-empty-inputs" /></li>
				<li style="text-align:center;"><button class="btn btn-primary" id="button-i-addNewBankCard">提交</button></li>
			</ul>			
		</div>
		<div id="div-i-3">
			<table class="table table-striped table-bordered table-hover" id="table-i-chongzhiTABLE">
				<thead>
					<tr>
						<th>序号</th>
						<th>付款金额(元)</th>
<!-- 						<th>申请时间</th> -->
						<th>处理时间</th>
						<th>类型</th>
						<th>状态</th>
						<th>操作</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
					
				</tbody>
			</table>
		</div>		
		<div id="div-i-4">
			<table class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>提款金额(元)</th>
						<th>申请时间</th>
						<th>处理时间</th>
						<th>状态</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody id="tbody-id-returnMoneyTable">
					<tr>
					</tr>
				</tbody>
			</table>
		</div>
		</div>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center foot">
			<iframe src="f.jsp"></iframe>
		</div>
		<script type="text/javascript">
		var NUMBERS = "1234567890"
		var PASSWORD = "qwertyuioplkjhgfdsazxcvbnmQWERTYUIOPLKJHGFDSAZXCVBNM123456"
		var checkIsNumber = function(s1) {
			if (!s1) {
				return false
			}
			for (var i = 0; i < s1.length; i++) {
				var letter = s1[i]
				if (!NUMBERS.includes(letter)) {
					return false
				}
			}
			return true			
		}
		
		var setChongZhiTable = function(arr) {
			var tbody = document.querySelector("#table-i-chongzhiTABLE").querySelector("tbody")
			tbody.innerHTML = ""
			for (var i = 0; i < arr.length; i++) {
				var item = arr[i]
				//备注
				var html = "<tr><td>" + (i + 1) + "</td><td>" + item.fukuanje + "</td>" + "<td>" + item.cltime + "</td><td>" + item.type + "</td><td>" + item.state + "</td><td>" + item.caozuo + "</td><td>" + item.beizhu + "</td></tr>"
				tbody.insertAdjacentHTML("beforeend", html)
			}
		}
		
		// 密码 纯数字  = 6 ~ 16 位  123 + "ab"
		var checkPassWord = function(s2) {
			if (!s2) {
				return false
			}
			for (var j = 0; j < s2.length; j++) {
				var letter = s2[j]
				if (!PASSWORD.includes(letter)) {
					return false
				}
			}
			if (s2.length < 6 || s2.length > 16) {
				return false
			}
			return true
		}
		
		var setReturnMoneyTableData = function(arr) {
			var tbody = document.querySelector("#tbody-id-returnMoneyTable")
			tbody.innerHTML = ""
			for (var i = 0; i < arr.length; i++) {
				var item = arr[i]
				var html = "<tr><td>" + (i + 1) + "</td><td>" + item.tikuanje + "</td><td>" + item.sqtime + "</td><td>" + item.cltime + "</td><td>" + item.state + "</td><td>" + item.beizhu + "</td></tr>"
				tbody.insertAdjacentHTML("beforeend", html)
			}
		}
		
			$("select").change(function(){
				$(".body img").attr("src","img/cz/"+$(this).val()+".png")
				$(".body a").attr("href","img/cz/"+$(this).val()+".png")
				$(".body a").attr("download","金色海岸"+$(this).val()+"支付")
			})		
			var bindLiTouchEvent = function() {
				var allLi = document.querySelectorAll(".tabLi")
				for (var i = 0; i < allLi.length; i++) {
					var item = allLi[i]
					item.addEventListener("touchend", function(event) {
						var parent = event.target.closest(".tabLi")
						var index = parent.dataset.index
						var activeDiv = document.querySelector(".div-active")
						activeDiv.classList.remove("div-active")
						var activeTab = document.querySelector(".active")
						activeTab.classList.remove("active")
						parent.classList.add("active")
						document.querySelector("#div-i-" + index).classList.add("div-active")
						if (index == "3") {
		 					var urlPath = "/cp2/bank/onechongzhi.do"
		 						var newRequest = {
		 							url: urlPath,
		 							type: "post",
		 							data: {
		 							},
		 							success: function(data) {
		 								var newData = JSON.parse(data)
		 								console.log("newData", newData)
		 								setChongZhiTable(newData.data)
		 							},
		 							error: function(status) {
		 							}
		 						}
		 						ajax(newRequest) 							
						}
						else if (index == "4") {
		 					var urlPath = "/cp2/bank/onetikuan.do"
		 						var newRequest = {
		 							url: urlPath,
		 							type: "post",
		 							data: {
		 							},
		 							success: function(data) {
		 								var newData = JSON.parse(data)
		 								setReturnMoneyTableData(newData.data)
		 							},
		 							error: function(status) {
		 							}
		 						}
		 						ajax(newRequest) 							
						}
					})
				}
			}
			// 账号 纯数字 >=16
			var bindAddNewBankCardEvent = function() {
				var btn = document.querySelector("#button-i-addNewBankCard")
				btn.addEventListener("touchend", function(event) {
					var allInputs = document.querySelectorAll(".cant-empty-inputs")
					for (var j = 0; j < allInputs.length; j++) {
						var input = allInputs[j]
						if (input.value == "") {
							alertme("存在空白数据")
							return
						}
						var accountValue = document.querySelector("#bankAccount-input-i").value
						if (!checkIsNumber(accountValue)) {
							alertme("银行账号输入有误")
							return
						}
						if (accountValue.length < 16) {
							alertme("银行账号格式有误")
							return
						}
						var passwordValue = document.querySelector("#getMoneyPassWord-input-i").value
						if (!checkPassWord(passwordValue)) {
							alertme("密码必须是6~16位, 可包含字母以及数字")
							return							
						}
						var repeatPassWordValue = $("#getMoneyPassWord-input-repeat").val()
						if (repeatPassWordValue != passwordValue) {
							alertme("两次密码输入不一致，请重新填写")
							return
						}
					}
					// 向你发添加银行卡的请求
 					var urlPath = "/cp2/bank/save.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							xingming:  $("#kaihuName-input-i").val(),//银行卡姓名
							bankNum: $("#bankAccount-input-i").val(),//银行卡帐号
							kaihuhang: $("#bankName-input-i").val(),//开户行
							zhihang: $("#wangdian-input-i").val(),//开户行地址
							zhifupass: $("#getMoneyPassWord-input-repeat").val(),//支付密码
							kaihudizhi: $("#shengfen-input-i").val() + $("#city-input-i").val(),//开户地址
							//缺少省份和城市
						},
						success: function(data) {
							console.log("data", data)
							var newData = JSON.parse(data)
							if (newData.data == "1") {
								location.reload()
							} else {
								alertme("添加银行卡失败，请稍后重试")
							}
						},
						error: function(status) {
						}
					}
					ajax(newRequest) 					
				})
			}
			
			var setInfoData = function(data) {
				$("#span-i-userAccount-fromServer").text(data.name)
				$("#span-i-truthName-fromServer").text(data.xingming)
				$("#span-i-accountMoney-fromServer").text(data.yue)
				$("#span-i-moneyBackType-fromServer").text(data.kaihuhang)
				$("#span-i-moneyBackAdd-fromServer").text(data.kaihudizhi+data.zhihang)
				$("#span-i-bankAccount-fromServer").text(data.bankNum)
			}
			
			var checkUserHasBankCard = function() {
				var urlPath = "/cp2/bank/getBankid.do"
				var newRequest = {
					url: urlPath,
					type: "post",
					data: {},
					success: function(data) {
						// 0 显示
						var newData = JSON.parse(data)
						if(newData.data == "0") {
							document.querySelector("#ul-i-twoDiv-2").classList.add("active")
						} else {
							console.log("newData", newData.data)
							setInfoData(newData.data)
							document.querySelector("#ul-i-twoDiv-1").classList.add("active")
						}
					},
					error: function(status) {
					}
				}
				ajax(newRequest)
			}
			//btn-i-addNewReturnMoney
			var bindReuturnMoneyBtnEvent = function() {
				var btn = document.querySelector("#btn-i-addNewReturnMoney")
				btn.addEventListener("click", function(event) {
					var moneyValue = $("#input-i-returnMoneyNumber").val()
					if ($("#input-i-returnMoneyNumber").val() == "" || $("#input-returnMoneyPass").val() == "") {
						alertme("存在空白数据")
						return
					}
					if (!checkIsNumber(moneyValue)) {
						alertme("请输入正确的金额")
						return
					}
					if (Number(moneyValue) < 100) {
						alertme("取款最小金额不能小于100")
						return						
					}
					if (Number(moneyValue) > 20000) {
						alertme("取款最小金额不能大于20000")
						return						
					}
					if (Number(moneyValue) > Number($("#span-i-accountMoney-fromServer").text())) {
						alertme("提款金额大于账户余额")
						return							
					}
					//
					var urlPath = "/cp2/bank/addtkjl.do"
					var newRequest = {
						url: urlPath,
						type: "post",
						data: {
							tkje: $("#input-i-returnMoneyNumber").val(),
							zhifupass: $("#input-returnMoneyPass").val(),
							skname: $("#span-i-truthName-fromServer").text(),
							skbankzh: $("#span-i-bankAccount-fromServer").text(),
							kaihuhang: $("#span-i-moneyBackType-fromServer").text(),
							kaihudizhi: $("#span-i-moneyBackAdd-fromServer").text(),
						},
						success: function(data) {
							// 0 显示
							var newData = JSON.parse(data)
							var newMessage = newData.data.split(",")
							if (newMessage[0] == "提款信息已提交") {
								alertme(newMessage[0])
								$("#span-i-accountMoney-fromServer").text(newMessage[1])
							} else {
								alertme(newMessage[0])
							}
							
						},
						error: function(status) {
						}
					}
					ajax(newRequest)
					})
			}
			checkUserHasBankCard()
			bindLiTouchEvent()
			bindAddNewBankCardEvent()
			bindReuturnMoneyBtnEvent()			
		</script>
	</body>
</html>